<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>易购商城--结算页</title>

	<link rel="stylesheet" type="text/css" href="css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css" />
</head>

<body>
<!--head-->
<div id="orderInfoApp">
	<div class="top">
		<shortcut />
	</div>

	<div  class="cart py-container">

		<!--logoArea-->
		<div class="logoArea">
			<div class="fl logo"><span class="title">结算页</span></div>
		</div>

		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对订单信息</h4>
			</div>
			<div class="checkout-steps">
				<!--收件人信息-->
				<div class="step-tit">
					<h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增收货地址</a></span></h5>
				</div>
				<div class="step-cont">
					<div class="addressInfo">
						<ul class="addr-detail">
							<li class="addr-item" v-for="(a,i) in addresses" :key="i">
								<div>
									<div :class="{con:true,name:true,selected:i === selectedAddress}"><a href="javascript:;" @click.stop="selectedAddress=i" >{{a.name}}<span title="点击取消选择"></span>&nbsp;</a></div>
									<div class="con address">{{a.state + a.city + a.district + a.address}} <span>{{a.phone}}</span>
										<span class="base" v-if="a.default">默认地址</span>
										<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>
									</div>
									<div class="clearfix"></div>
								</div>

							</li>
						</ul>
						<!--添加地址-->
						<div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
										<h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
									</div>
									<div class="modal-body">
										<form action="" class="sui-form form-horizontal">
											<div class="control-group">
												<label class="control-label">收货人：</label>
												<div class="controls">
													<input type="text" class="input-medium">
												</div>
											</div>

											<div class="control-group">
												<label class="control-label">详细地址：</label>
												<div class="controls">
													<input type="text" class="input-large">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">联系电话：</label>
												<div class="controls">
													<input type="text" class="input-medium">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">邮箱：</label>
												<div class="controls">
													<input type="text" class="input-medium">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">地址别名：</label>
												<div class="controls">
													<input type="text" class="input-medium">
												</div>
												<div class="othername">
													建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#" class="sui-btn btn-default">父母家</a>　<a href="#" class="sui-btn btn-default">公司</a>
												</div>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" data-ok="modal" class="sui-btn btn-primary btn-large">确定</button>
										<button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
									</div>
								</div>
							</div>
						</div>
						<!--确认地址-->
					</div>
					<div class="hr"></div>

				</div>
				<div class="hr"></div>
				<!--支付和送货-->
				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付方式</h5>
					</div>
					<div class="step-cont">
						<ul class="payType">
							<li :class="{selected:order.paymentType===1}" @click="order.paymentType=1">微信付款<span title="点击取消选择"></span></li>
							<li :class="{selected:order.paymentType===2}" @click="order.paymentType=2">货到付款<span title="点击取消选择"></span></li>
						</ul>
					</div>
					<div class="hr"></div>
					<div class="step-tit">
						<h5>送货清单</h5>
					</div>
					<div class="step-cont">
						<ul class="send-detail">
							<li v-for="(good,index) in carts" :key="index">
								<div class="sendGoods">
									<ul class="yui3-g">
										<li class="yui3-u-1-6">
											<span><img width="70px" height="70px" :src="good.image"/></span>
										</li>
										<li class="yui3-u-7-12">
											<div class="desc">{{good.title}}</div>
											<div class="seven">
						<span v-for="(v,k) in good.ownSpec" :key="k">
                            {{v}}
                        </span>
											</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="price">￥{{ego.formatPrice(good.price * good.num)}}</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="num">X{{good.num}}</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="exit">有货</div>
										</li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<div class="hr"></div>
				</div>
				<div class="linkInfo">
					<div class="step-tit">
						<h5>发票信息</h5>
					</div>
					<div class="step-cont">
						<span>普通发票（电子）</span>
						<span>个人</span>
						<span>明细</span>
					</div>
				</div>
				<div class="cardInfo">
					<div class="step-tit">
						<h5>使用优惠/抵用</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="order-summary">
			<div class="static fr">
				<div class="list">
					<span><i class="number">1</i>件商品，总商品金额</span>
					<em class="allprice">¥{{ego.formatPrice(totalPay)}}</em>
				</div>
				<div class="list">
					<span>返现：</span>
					<em class="money">{{ego.formatPrice(order.discount)}}</em>
				</div>
				<div class="list">
					<span>运费：</span>
					<em class="transport">{{ego.formatPrice(order.postFree)}}</em>
				</div>
			</div>
		</div>
		<div class="clearfix trade">
			<div class="fc-price">应付金额:　<span class="price">¥{{ego.formatPrice(totalPay-order.discount)}}</span></div>
			<div class="fc-receiverInfo">
				寄送至:{{addresses[selectedAddress].address}}
				收货人：{{addresses[selectedAddress].name}} {{addresses[selectedAddress].phone}}
			</div>
		</div>
		<div class="submit">
			<a class="sui-btn btn-danger btn-xlarge" href="#" @click="submit">提交订单</a>
		</div>
	</div>

</div>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
	var orderInfoVm = new Vue({
		el:"#orderInfoApp",
		data:{
			ego,
			addresses:[// 可选地址列表,假数据，需要从后台查询
				{
					name:"刘德华",// 收件人姓名
					phone:"181800000000",// 电话
					state:"四川",// 省份
					city:"成都",// 城市
					district:"高新区",// 区
					address:"高新大道100号",// 街道地址
					zipCode:"610000", // 邮编
					default: true
				},
				{
					name:"学友",// 收件人姓名
					phone:"181800000000",// 电话
					state:"四川",// 省份
					city:"成都",// 城市
					district:"简阳区",// 区
					address:"高新大道100号",// 街道地址
					zipCode:"610000", // 邮编
					default: false
				}
			],
			selectedAddress: 0,
			carts:[],
			order:{
				paymentType:1, //付款方式,默认1:微信支付
				postFree:0,//邮费
				discount:0//优惠
			}
		},
		created(){
			// 判断是否登录
			ego.http.get("/auth/verify").then(() => {
				this.carts = ego.store.get("selectedCarts")||[];
			}).catch(() => {
				// 未登录
				window.location.href = "/login.html?returnUrl=" + window.location.href;
			})
		},
		methods:{
			submit() {
				// 把购物车数据处理成订单详情
				const orderDetails = this.carts.map(({userId, ...rest}) => rest);
				// 将ownSpec转成字符串
				orderDetails.forEach(od=>od.ownSpec=JSON.stringify(od.ownSpec));
				// 处理物流信息
				const addr = this.addresses[this.selectedAddress];
				const obj = {
					receiver: addr.name,
					receiverState: addr.state,
					receiverCity: addr.city,
					receiverAddress: addr.address,
					receiverDistrict: addr.district,
					receiverMobile: addr.phone,
					receiverZip: addr.zipCode
				};
				// 复制到订单对象
				Object.assign(this.order, obj, {
					orderDetails,
					totalPay: this.totalPay,
					actualPay: this.actualPay,
				});
				// 提交订单
				ego.http({
					url:"/order/order",
					method:"post",
					data:this.order,
					transformResponse: [function (data) {
						// Do whatever you want to transform the data
						return data;
					}]
				}).then(({data}) => {
					// 在线支付，需要到付款页
					window.location = "pay.html?orderId=" + data;
				}).catch((resp) => {
					alert("订单提交失败，可能是缺货!")
				})
			}
		},
		components:{
			shortcut: () => import("/js/pages/shortcut.js")
		},
		computed: {
			totalNum(){
				return this.carts.reduce((c1, c2) => c1 + c2.num, 0)
			},
			totalPay(){
				return this.carts.reduce((c1, c2) => c1 + c2.price * c2.num, 0);
			},
			actualPay(){
				return this.totalPay + this.order.postFree - this.order.discount;
			}
		},
	});
</script>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/pages/getOrderInfo.js"></script>
</body>

</html>
